import {
  Box,
  HStack,
  IconButton,
  Text,
  Tooltip,
  useColorModeValue,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { MdOutlineDeleteSweep } from 'react-icons/md';

import { useAppDispatch } from 'app/store/storeHooks';

import { setNegativePromptTags, setPromptTags } from '../../store/tagSlice';
import TagItem, { SelectedTagType } from './TagItem';

const SelectedTags = ({
  tags,
  type,
}: {
  tags: SelectedTagType[];
  type?: string;
}) => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const border_c = useColorModeValue('gray.300', 'gray.700');
  const isNegative = type === 'negative';

  const onClearTag = () => {
    if (isNegative) {
      dispatch(setNegativePromptTags([]));
    } else {
      dispatch(setPromptTags([]));
    }
  };
  return (
    <Box mb="4">
      <Text h="1.5rem" fontWeight="600">
        {isNegative ? 'Negative prompt tags:' : 'Prompt tags:'}
      </Text>
      <Box
        border="1px"
        h="8rem"
        borderRadius="base"
        borderColor={border_c}
        overflowY="scroll"
      >
        {tags.map((t) => (
          <TagItem key={t.key} tag={t} type={type} />
        ))}
      </Box>
      <HStack
        spacing={1}
        display="flex"
        justify="flex-end"
        alignItems="center"
        h="2rem"
      >
        <Tooltip
          label={isNegative ? t('tag.clearNegative') : t('tag.clear')}
          hasArrow
          placement="top"
        >
          <IconButton
            color="gary.700"
            aria-label=""
            icon={<MdOutlineDeleteSweep />}
            size="xs"
            onClick={() => onClearTag()}
            fontSize={20}
          />
        </Tooltip>
      </HStack>
    </Box>
  );
};

export default SelectedTags;
